<template>
	<view class="page">
		<view style="position: absolute;z-index: 2;top: 35rpx;color:red;" @click="goBack()">返回</view>
		<map v-if="polyline[0].points.length > 0" id="mymap" style="width: 100%;height: 90vh;"
			:longitude="polyline[0].points[0].longitude" :latitude="polyline[0].points[0].latitude" :markers="makers"
			:polyline="polyline" ></map>
		<view class="">
			<button type="default" v-if="startMove" @click="handleStopMove()">暂停导航</button>
			<button class="start" type="default" v-else @click="handleStartMove()">开始导航</button>

		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import QQMapWX from '../../common/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				terminal: null, //羊的位置
				mapContext: null, //地图对象
				nextPointIndex: 1, //下一个坐标点的索引
				duratioinTime: 1000, ////相邻两点动画持续时长默认1秒
				makers: [{
						id: 1,
						width: 40,
						height: 40,
						latitude: 44.645013,
						longitude: 87.498560,
						iconPath: 'https://img0.baidu.com/it/u=1691000662,1326044609&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695488400&t=3eedb2026b549b21f5a0a3ed7dbbd545',
						callout: { //气泡 callout
							content: "张三", // 起始人信息
							display: "ALWAYS", //ALWAYS总是显示，BYCLICK点击时触发
							// fontWeight: "bold",
							color: "#5A7BEE", //文本颜色
							fontSize: "12px",
							bgColor: "#ffffff", //背景色
							padding: 5, //文本边缘留白
							textAlign: "center",
						},
						// rotate:-90,
						anchor: {
							x: 0.5,
							y: 1
						}
					},
					{
						id: 2,
						width: 30,
						height: 30,
						latitude: 0,
						longitude: 0,
						iconPath: 'https://img1.baidu.com/it/u=2314972288,3260633505&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1695488400&t=92d9860999e70e89e98b5c121f895701',
					}
				],
				polyline: [{
					// width: ,
					points: [],
					arrowLine: true,
					color: '#3591FC',
				}],
				startMove: false, //是否开启回放
				qqmapsdk: null,
				covers:[], //显示坐标点
			}
		},
		onLoad(option) {
			this.terminalCoordinate(option.id)   //获取羊ID
			this.qqmapsdk = new QQMapWX({
				key: 'M5JBZ-XEZCJ-6SPFB-DH4E5-QFCS7-FCBTQ'
			});
			/*
			createMapContext:接受两个参数：mapID、this
			返回一个mapContext对象
			通过 mapId 跟一个 <map> 组件进行绑定，操作对应的 <map> 组件。
			
			*/
			this.mapContext = uni.createMapContext('mymap', this)
			
			uni.getLocation({
				type:'wgs84',
				success:res=>{
					// this.longitude=res.longitude
					// this.latitude=res.latitude
				}
			})
		},
		methods: {
			goBack() {
				uni.switchTab({
					url: '/pages/optimization/optimization'
				})
			},
			//模拟获取远程数据
			getTrack() {
				this.polyline[0].points = [{
						latitude: 39.997761,
						longitude: 116.478935
					},
					{
						latitude: 39.997825,
						longitude: 116.478939
					},
					{
						latitude: 39.998549,
						longitude: 116.478912
					},
					{
						latitude: 39.998555,
						longitude: 116.478998
					},
					{
						latitude: 39.998566,
						longitude: 116.479282
					},
					{
						latitude: 39.998528,
						longitude: 116.479658
					},
					{
						latitude: 39.998453,
						longitude: 116.480151
					},
					{
						latitude: 39.998302,
						longitude: 116.480784
					},
					{
						latitude: 39.998184,
						longitude: 116.481149
					},
					{
						latitude: 39.997997,
						longitude: 116.481573
					},
					{
						latitude: 39.997846,
						longitude: 116.481863
					},
					{
						latitude: 39.997718,
						longitude: 116.482072
					},
					{
						latitude: 39.997718,
						longitude: 116.482362
					},
					{
						latitude: 39.998935,
						longitude: 116.483633
					},
					{
						latitude: 39.998968,
						longitude: 116.48367
					},
					{
						latitude: 39.999861,
						longitude: 116.484648
					}
				]
				this.duratioinTime = Math.ceil(3000 / this.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
				this.initMapData()

			},
			//设置位置（从起点开始）
			initMakers() {
				this.makers[0].latitude = this.polyline[0].points[0].latitude;
				this.makers[0].longitude = this.polyline[0].points[0].longitude;
			},
			//设置地图
			initMapData() {
				this.initMakers()
				this.mapContext = uni.createMapContext('mymap', this)
			},
			getPathing(obj) {
				// 暂存this---direction方法里面会用到
				const that = this
				console.log(obj, '····················啊啊啊啊');
				// 设置终点图标
				that.makers[1].latitude = obj.latitude
				that.makers[1].longitude = obj.longitude

				// direction方法绘制路线
				this.qqmapsdk.direction({
					mode: 'bicycling', //骑行模式
					from: {
						latitude: 44.645013,
						longitude: 87.498560
					},
					to: {
						latitude: obj.latitude,
						longitude: obj.longitude
					},
					 policy:3, // ˈpɒləsi'
					 /*
					 0：默认，不考虑任何避让策略。
					 1：不走高速，选择不走高速的路径规划方案。
					 2：避免拥堵，选择躲避拥堵的路径规划方案。
					 3：最短距离，选择距离最短的路径规划方案。
					 4：躲避收费道路，选择不走收费道路的路径规划方案。
					 */
					// 执行成功的回调
					success: function(res) {
						console.log(res,'·················坐标结果···········');
						let polyline = [];
						// //坐标解压（返回的点串坐标，通过前向差分进行压缩）
						let list = []
						var coors = res.result.routes[0].polyline
						for (let i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / 1000000
							list.push(coors[i])
						}
						for (let i = 0; i < list.length; i += 2) {
							polyline.push({
								latitude: list[i],
								longitude: list[i + 1]
							})
						}
						// console.log(polyline,'··········经纬度··········');
						that.polyline = [{
							points: polyline,
							color: '#00aaffdd',
							width: 10,
						}]
						console.log(that.polyline,'···················所以经纬度··········');
					},
					fail: (error) => {
						console.log(error, 11111);
					}
				})
			},
			//移动坐标
			movePoint() {
				// 显示起点到终点之间生成的所有经纬度位置信息
				this.covers = this.polyline[0].points.map((point, index) => {
					return {
						id:new Date(),
						longitude: point.longitude,
						latitude: point.latitude,
						width: 20,
						height: 20
					}
				})
				// 切换当前中心点位置
				uni.createMapContext('map', this).moveToLocation({
					longitude:this.polyline[0].points[this.nextPointIndex].longitude,
					latitude:  this.polyline[0].points[this.nextPointIndex].latitude
				})
				this.mapContext.translateMarker({
					duration: this.duratioinTime, //动画持续时长 ，默认是1000ms
					markerId: this.makers[0].id, //人的markerID
					destination: { //指定marker移动到的目标点
						latitude: this.polyline[0].points[this.nextPointIndex].latitude,
						longitude: this.polyline[0].points[this.nextPointIndex].longitude
					},
					//动画结束回调函数
					animationEnd: res => {
						//播放结束，继续移动到下一个点，最后一个点时结束移动
						if (this.nextPointIndex < this.polyline[0].points.length - 1) { 
							this.nextPointIndex++
							
							if (this.startMove) {
								this.movePoint()
							}
						} else {
							this.nextPointIndex = 1
							console.log(this.nextPointIndex, '··········当前下标·······');
							this.startMove = false
						}

					}
				})
			},
			//开始移动
			handleStartMove() {
				this.startMove = true
				this.movePoint()
			},
			//暂停移动
			handleStopMove() { 
				this.startMove = false
			},
			//获取出圈羊的坐标
			async terminalCoordinate(id) {
				let that = this
				let {
					data: {
						obj
					}
				} = await request('/zsl/seek?id=' + id)

				obj.map(item => {
					that.getPathing(item)
				})
			},

		},
	}
</script>

<style>

</style>